<template>
  <div>
    <el-table v-loading="loading"
              :cell-style="rowStyle"
              :data="tabledata" border stripe style="width: 100%" :header-cell-style="tableHeaderColor">
      <el-table-column type="index" align="center" width="80px" label="序号"></el-table-column>
      <el-table-column
        v-for="item in tabledatacolumn"
        :key="item.key"
        :prop="item.key"
        :label="item.label"
        :width="calcWidth(item)"
      >
      <template slot-scope="scoped">
      <template v-if="item.type&&item.type == 'image'">
        <el-tooltip class="item" effect="light" content="点击查看大图" placement="top">
          <el-image
            style="width: 50px; height: auto"
            :src="scoped.row[item.key]"
            :preview-src-list="item.srclist"
            fit="contain">
          </el-image>
      </el-tooltip>


      </template>
       <template v-else-if="item.type && item.type == 'edit'">
       <el-link  @click="xgtps(scoped.row)" type="primary">{{scoped.row[item.key]}}</el-link>
      </template>

      <template v-else-if="item.type && item.type == 'shjg'">
        <span style="color:#000" v-if="scoped.row.approval==0">未审核</span>
        <span style="color:#4fbe8d" v-if="scoped.row.approval==1">审核通过</span>
        <span style="color:#f00" v-if="scoped.row.approval==-1">未通过</span>
      </template>
      <template v-else-if="item.type && item.type == 'link'">
        <el-link :underline="false" @click="golink(scoped.row)">{{scoped.row[item.key]}}</el-link>
      </template>
      <template v-else>
        {{scoped.row[item.key]}}
      </template>

      </template>
      </el-table-column>
      <el-table-column label="操作" width="280px" align="center">
        <template slot-scope="scoped">
          <slot name="default" :info="scoped.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- {{params.total}} -->
    <div class="fenye" v-if="isshow">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="params.total">
    </el-pagination>


      <!-- <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-size="10"
        :total="params.total">
      </el-pagination> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "TableList",
  props: {
    isshow: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    params: {
      type: Object,
      default() {
        return {};
      },
    },
    tabledatacolumn: {
      type: Array,
      default() {
        return [];
      },
    },
    tabledata: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created(){

  },
  methods: {
    rowStyle({ row,column ,rowIndex ,columnIndex}){
      return 'text-align:center'
    },
    calcWidth(item){
      if(item.key == 'title'){
        return '670';
      }else if(item.key == 'approvalTime' || item.key == 'pubDate' || item.key == 'createTime'){
        return '160';
      }else if(item.key == 'organizationName'){ //机构
        return '120';
      }else if (item.key == 'columnName'){
        return '150';
      }
      return ''
    },
    golink(val){
      this.$emit('chakan',val)
    },
    xgtps(val){
      this.$emit('xgtps', val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleSizeChange(val){
      this.$emit("handleSizeChange", val);
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color:#F6F5FB; font-size:15px;text-align:center;'
      }
    },
  },
};
</script>
